<template>
  <div class="MenuConfig">
    <div class="left_system">
      <div class="selectSystem">
        <div class="title">系统菜单选择</div>
        <div class="check_box">
          <el-radio v-model="radio" label="1" @input="radioChange">PC</el-radio>
          <el-radio style="margin-top: 20px;" @input="radioChange" v-model="radio" label="2">APP</el-radio>
        </div>
      </div>
    </div>
    <div class="left_menuTree">
      <menuTreeComponent :menuType="radio" @handleTree="handleTree" ref="menuTree"></menuTreeComponent>
    </div>
    <div class="right_content">
      <div class="top_menu">
        <div class="menu_left">
          <div class="check_item" @click="checkMenu(item)" v-for="(item, index) in checkList"
            :class="menuCheckId === item.id ? 'checkColor' : ''" :key="index">{{ item.name }}</div>
        </div>
      </div>
      <div class="main_content">
        <!-- 明细 -->
        <div class="details_box" v-show="menuCheckId === 1">
          <DialogForm @handleNodeClick="handlTree" ref="formTasking" :formConfig="formConfig" />
          <div style="width: 50%;display: flex;justify-content: center;align-items: center;">
            <el-button type="primary" @click="CdpzSave">保存</el-button>
          </div>
        </div>
        <div class="subordinate" v-show="menuCheckId === 2">
          <div class="list_box">
            <LsdTable slot="yjrwlb" :autoHeight="table.autoHeight" :paginationAtrrs="table.paginationAtrrs"
              @pageChange="handleSizeChange" :compRef="table.compRef" ref="yjrwlb" :columns="table.columns"
              :title="table.title" :actions="table.actions" :tableData="table.tableData" :tableAttr="table.tableAttr"
              :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag"
              @onActionClick="onActionClick" />
          </div>
        </div>
        <div class="btnPower" v-show="menuCheckId === 3">
          <div class="draggable_box">
            <div class="draggable_title">当前按钮权限</div>
            <div class="nowBox" @dragover.prevent @drop="drop('box1')">
              <div class="item" v-for="item in box1" :key="item.id" @dragstart="dragStart(item, 'box1')" draggable="true">
                {{ item.btnName }}</div>
            </div>
            <div class="draggable_title">可选按钮权限</div>
            <div class="boxList" @dragover.prevent @drop="drop('box2')">
              <div class="items" v-for="item in box2" :key="item.id" @dragstart="dragStart(item, 'box2')"
                draggable="true">
                {{ item.btnName }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 下级菜单弹窗 -->
    <LsdDialog @handleBtn="onActionClick" :dialogConfig="dialogConfig">
      <DialogForm v-if="dialogConfig.isShow" slot="dialog" ref="xjcdForm" :formConfig="formConfig1" />
    </LsdDialog>
  </div>
</template>

<script>
import menuTreeComponent from "../components/menuTree.vue";
import { deleteMenuByIds } from "@/api/common.js";
import {
  getById,
  updById,
  menuTree,
  subMenulistPage,
  menuAdd,
  updateComponentByIds,
  getBtnByMenuId
} from "@/api/SystemConfig/menuConfig.js";
export default {
  components: {
    menuTreeComponent
  },
  data() {
    return {
      radio: "1",
      checkList: [
        {
          name: "明细",
          id: 1
        },
        {
          name: "下级菜单",
          id: 2
        },
        {
          name: "按钮权限",
          id: 3
        }
      ],
      box1: [],
      box2: [],
      defaultBtnList: [
        { id: "1", btnName: "新增" },
        { id: "2", btnName: "编辑" },
        { id: "3", btnName: "删除" },
        { id: "4", btnName: "审批" },
        { id: "5", btnName: "研判" },
        { id: "6", btnName: "生成预警研判单" },
        { id: "7", btnName: "预览" },
        { id: "8", btnName: "转响应" },
        { id: "9", btnName: "视频资源配置" },
        { id: "10", btnName: "查看" },
        { id: "11", btnName: "到岗到位情况" },
        { id: "12", btnName: "任务分配" },
        { id: "13", btnName: "任务派遣" },
        { id: "14", btnName: "灾情任务下发" },
        { id: "15", btnName: "视频资源配置" },
        { id: "16", btnName: "续报" },
        { id: "17", btnName: "填报" },
        { id: "18", btnName: "生成响应命令单" },
        { id: "19", btnName: "选队伍" },
        { id: "20", btnName: "报送" },
        { id: "21", btnName: "查看指挥部" },
        { id: "22", btnName: "调整" },
        { id: "23", btnName: "终止" },
        { id: "24", btnName: "导入" },
        { id: "25", btnName: "导出" },
        { id: "26", btnName: "下发通知" },
        { id: "27", btnName: "通知审批" },
        { id: "28", btnName: "人员反馈" },
        { id: "29", btnName: "上传结果" },
        { id: "30", btnName: "签到表" },
        { id: "31", btnName: "成绩单" },
        { id: "32", btnName: "查看结果" },
        { id: "33", btnName: "查看签到表" },
        { id: "34", btnName: "查看成绩单" },
        { id: "35", btnName: "签到" },
        { id: "36", btnName: "签退" },
        { id: "37", btnName: "详情" },
        { id: "38", btnName: "人员变更" }
      ],
      menuCheckId: Number(sessionStorage.getItem("menuCheckId")) || 1,
      // 明细
      formConfig: {
        formData: [
          {
            type: "selectTree",
            label: "上级菜单",
            prop: "superMenu",
            name: "superMenuId",
            keyWord: "keyWords",
            treeRef: "treeRef",
            clickClose: true,
            commonClick: true,
            title: "上级菜单选择",
            choose: false,
            ref: "tree_select",
            multiple: false,
            lableWidth: "140px",
            class: "sjgy",
            option: [],
            treeData: {
              data: [],
              checked: [],
              props: {
                children: "children",
                label: "menuName",
                value: "id"
              }
            }
          },
          // {
          //   label: "上级菜单路径",
          //   type: "input",
          //   prop: "parent",
          //   class: "sjgy",
          //   isDisabled: true,
          //   lableWidth: "140px"
          // },
          {
            label: "菜单名称",
            type: "input",
            prop: "menuName",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "菜单路径",
            type: "input",
            prop: "menuUrl",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "菜单编码",
            type: "input",
            prop: "menuCode",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "排序",
            type: "number",
            prop: "sort",
            class: "sjgy",
            min: 0,
            lableWidth: "140px"
          },
          {
            type: "select",
            label: "菜单类型",
            prop: "menuType",
            // name: "orgType",
            lableWidth: "140px",
            class: "sjgy",
            option: [
              {
                value: 1,
                label: "系统内部菜单"
              },
              {
                value: 2,
                label: "外部继承菜单"
              }
            ]
          },
          {
            type: "select",
            label: "下级样式",
            prop: "direct",
            // name: "orgType",
            lableWidth: "140px",
            class: "sjgy",
            option: [
              {
                value: "transverse",
                label: "横向"
              },
              {
                value: "1",
                label: "竖向"
              }
            ]
          }
        ]
      },
      // 下级菜单,
      formConfig1: {
        formData: [
          {
            label: "菜单名称",
            type: "input",
            prop: "menuName",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "菜单图标",
            type: "input",
            prop: "menuIcon",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "菜单路径",
            type: "input",
            prop: "menuUrl",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "菜单编码",
            type: "input",
            prop: "menuCode",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "排序",
            type: "number",
            prop: "sort",
            class: "sjgy",
            min: 0,
            lableWidth: "140px"
          },
          {
            type: "select",
            label: "菜单类型",
            prop: "menuType",
            // name: "orgType",
            lableWidth: "140px",
            class: "sjgy",
            option: [
              {
                value: "1",
                label: "系统内部菜单"
              },
              {
                value: "2",
                label: "外部集成菜单"
              }
            ]
          },
          {
            type: "select",
            label: "下级样式",
            prop: "direct",
            // name: "orgType",
            lableWidth: "140px",
            class: "sjgy",
            option: [
              {
                value: "transverse",
                label: "横向"
              },
              {
                value: "1",
                label: "竖向"
              }
            ]
          }
        ],
        rules: {
          menuName: [
            { required: true, message: "请输入菜单名称", trigger: "blur" }
          ],
          menuUrl: [
            { required: true, message: "请输入菜单路径", trigger: "blur" }
          ],
          direct: [
            { required: true, message: "请选择下级样式", trigger: "blur" }
          ]
        }
      },
      dialogConfig: {
        title: "菜单新增",
        isShow: false,
        type: "",
        btnList: [
          {
            name: "确定",
            type: "primary",
            id: "submit",
            size: "mini"
          },
          {
            name: "取消",
            id: "cancel",
            size: "mini"
          }
        ],
        width: "33%"
      },
      serchForm: {},
      // 列表表格
      table: {
        isSelectFlag: false,
        compRef: "yjrwlb",
        // autoHeight: true,
        isSequenceFlag: true,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "",
        actions: [
          {
            id: "add",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "menuName",
            label: "菜单名称",
            align: "center",
            "min-width": "90px"
          },
          {
            prop: "menuTypeName",
            label: "菜单类型",
            align: "center",
            "min-width": "90px"
          },
          {
            prop: "menuUrl",
            label: "菜单路径",
            align: "center",
            "min-width": "90px"
          },
          {
            prop: "menuCode",
            label: "菜单编号",
            align: "center",
            "min-width": "90px"
          },
          {
            prop: "menuType",
            label: "菜单类型",
            align: "center",
            "min-width": "90px",
            formatter: (row, column, cellValue, index) => {
              const result = {
                "1": "系统内部菜单",
                "2": "外部集成菜单"
              };
              return result[cellValue];
            }
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            "min-width": "80px",
            render: (h, scope) => {
              const arr = ["删除"];
              return (
                <div>
                  {
                    arr.map(item => {
                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 2px' {...{
                          on: {
                            click: () => {
                              this.actionHandle(scope);
                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div >
              );
            }
          }
        ],
        tableAttr: {
          "max-height": `${window.innerHeight - (window.innerHeight * 0.4)}px`,
          height: `${window.innerHeight - (window.innerHeight * 0.4)}px`,
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            color: "#333333",
            "font-size": "18px"
          }
        },
        // 分页信息
        paginationAtrrs: {
          total: 0,
          "background": true,
          layout: "prev, pager, next",
          "current-page": 1,
          "page-size": 10
        }
      },
      menuId: "",
      menuName: "",
      menuSort: ""
    };
  },
  computed: {},
  watch: {},
  methods: {
    actionHandle(scope) {
      if (JSON.parse(sessionStorage.getItem("role")).roleCode !== "dmp") {
        return this.$notify.warning("非研发管理员无权限操作!");
      }
      this.$confirm("确定要删除该菜单吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteMenuByIds([scope.row.id]).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.getSubMenuList();
        });
      });
    },
    radioChange(val) {
      console.log(val, "---val");
    },
    allowDrop(event) {
      event.preventDefault();
    },
    dragStart(item, sourceBox) {
      event.dataTransfer.setData("text/plain", JSON.stringify({ item, sourceBox }));
    },
    async drop(targetBox) {
      const data = JSON.parse(event.dataTransfer.getData("text/plain"));
      const { item, sourceBox } = data;
      const sourceItems = sourceBox === "box1" ? this.box1 : this.box2;
      const sourceIndex = sourceItems.findIndex((i) => i.id === item.id);
      if (targetBox != sourceBox) {
        // 从源盒子中移除元素
        sourceItems.splice(sourceIndex, 1);
        const targetItems = targetBox === "box1" ? this.box1 : this.box2;
        // 将元素添加到目标盒子
        targetItems.push(item);
        const params = {
          id: this.menuId,
          component: this.box1
        };
        const res = await updateComponentByIds(params);
        if (targetBox === "box1" && res) {
          this.$message({
            message: "添加成功!",
            type: "success"
          });
        } else if (targetBox === "box2" && res) {
          this.$message({
            message: "移除成功!",
            type: "success"
          });
        }
      }
    },
    async getBtnPower(id) {
      const res = await getBtnByMenuId(id);
      this.box1 = res || [];
      this.box2 = this.defaultBtnList;
      if (res) {
        this.box2 = this.box2.filter((i) => {
          return !this.box1.some((j) => {
            return j.id === i.id;
          });
        });
      }
    },
    checkMenu(item) {
      this.menuCheckId = item.id;
      sessionStorage.setItem("menuCheckId", item.id);
      if (this.menuCheckId === 1) {
        this.getDetails(this.menuId);
        this.getMenuTree();
      } else if (this.menuCheckId === 2) {
        this.getSubMenuList();
      } else if (this.menuCheckId === 3) {
        this.getBtnPower(this.menuId);
      }
    },
    handleTree(data, menuType) {
      this.menuType = menuType;
      this.menuId = data.id;
      this.menuName = data.menuName;
      this.menuSort = data.sort;
      const menuCheckId = Number(sessionStorage.getItem("menuCheckId")) || 1;
      if (menuCheckId === 1) {
        this.getDetails(data.id);
        this.getMenuTree();
      } else if (menuCheckId === 2) {
        this.getSubMenuList();
      } else {
        this.getBtnPower(this.menuId);
      }
    },
    // 获取菜单结构树
    async getMenuTree(type) {
      const res = await menuTree();
      if (!type) {
        this.formConfig.formData.forEach(i => {
          if (i.label === "上级菜单") {
            i.treeData.data = res;
          }
        });
      }
      // else if (type === "add") {
      //   this.formConfig1.formData.forEach(i => {
      //     if (i.label === "上级菜单") {
      //       i.treeData.data = res;
      //     }
      //   });
      // }
    },
    onActionClick(item) {
      this[item.id]();
    },
    // 菜单树点击事件
    handlTree(item, nowId, index, data, node) {
      this.checkMenuName(data, node);
    },
    // 递归查询当前id
    checkMenuName(data, node) {
      if (!data.pid) {
        this.$set(this.$refs.formTasking.form, "parent", data.menuUrl);
      } else {
        if (!node.parent.data.pid) {
          this.$set(this.$refs.formTasking.form, "parent", data.menuUrl);
        } else {
          this.checkMenuName(node.parent.data, node.parent);
        }
      }
      console.log(this.$refs.formTasking.form.menuUrl, "---menuNmae");
    },
    // 菜单详情
    async getDetails(id) {
      const res = await getById(id);
      if (res) {
        this.$refs.formTasking.form = { ...res };
      }
    },
    // 修改菜单
    async CdpzSave() {
      const params = {
        ...this.$refs.formTasking.form,
        pid: this.$refs.formTasking.form.superMenuId
      };
      const res = await updById(params);
      if (res) {
        this.$refs.menuTree.getMenuTree();
        this.$message({
          message: "修改成功!",
          type: "success"
        });
      }
    },
    // 分页
    handleSizeChange(val) {
      const data = {
        pageNum: val["current-page"],
        pageSize: val["page-size"]
      };
      this.getSubMenuList(data);
    },
    // 查询下级菜单
    async getSubMenuList(data) {
      let params = {};
      if (data) {
        params = {
          ...data,
          pid: this.menuId
        };
      } else {
        params = {
          pid: this.menuId,
          // menuName: this.menuName,
          pageNum: 1,
          pageSize: 10
        };
      }
      const res = await subMenulistPage(params);
      this.table.tableData = res.data;
      this.table.paginationAtrrs.total = res.total;
    },
    // 菜单新增
    add() {
      this.dialogConfig.isShow = true;
      if (this.menuType === "1") {
        this.formConfig1 = {
          formData: [
            {
              label: "菜单名称",
              type: "input",
              prop: "menuName",
              class: "sjgy",
              lableWidth: "140px"
            },
            {
              label: "菜单图标",
              type: "input",
              prop: "menuIcon",
              class: "sjgy",
              lableWidth: "140px"
            },
            {
              label: "菜单路径",
              type: "input",
              prop: "menuUrl",
              class: "sjgy",
              lableWidth: "140px"
            },
            {
              label: "菜单编码",
              type: "input",
              prop: "menuCode",
              class: "sjgy",
              lableWidth: "140px"
            },
            {
              label: "排序",
              type: "number",
              prop: "sort",
              class: "sjgy",
              min: 0,
              lableWidth: "140px"
            },
            {
              type: "select",
              label: "菜单类型",
              prop: "menuType",
              // name: "orgType",
              lableWidth: "140px",
              class: "sjgy",
              option: [
                {
                  value: "1",
                  label: "系统内部菜单"
                },
                {
                  value: "2",
                  label: "外部集成菜单"
                }
              ]
            },
            {
              type: "select",
              label: "下级样式",
              prop: "direct",
              // name: "orgType",
              lableWidth: "140px",
              class: "sjgy",
              option: [
                {
                  value: "transverse",
                  label: "横向"
                },
                {
                  value: "1",
                  label: "竖向"
                }
              ]
            }
          ],
          rules: {
            menuName: [
              { required: true, message: "请输入菜单名称", trigger: "blur" }
            ],
            menuUrl: [
              { required: true, message: "请输入菜单路径", trigger: "blur" }
            ],
            direct: [
              { required: true, message: "请选择下级样式", trigger: "blur" }
            ]
          }
        };
      } else {
        this.formConfig1 = {
          formData: [
            {
              label: "菜单名称",
              type: "input",
              prop: "menuName",
              class: "sjgy",
              lableWidth: "140px"
            },
            {
              label: "菜单路径",
              type: "input",
              prop: "menuUrl",
              class: "sjgy",
              lableWidth: "140px"
            },
            {
              label: "菜单编码",
              type: "input",
              prop: "menuCode",
              class: "sjgy",
              lableWidth: "140px"
            },
            {
              label: "菜单图片路径",
              type: "input",
              prop: "menuIcon",
              class: "sjgy",
              lableWidth: "140px"
            },
            {
              label: "排序",
              type: "number",
              prop: "sort",
              class: "sjgy",
              min: 0,
              lableWidth: "140px"
            },
            {
              type: "select",
              label: "菜单类型",
              prop: "menuType",
              // name: "orgType",
              lableWidth: "140px",
              class: "sjgy",
              option: [
                {
                  value: "1",
                  label: "系统内部菜单"
                },
                {
                  value: "2",
                  label: "外部集成菜单"
                }
              ]
            },
            {
              type: "select",
              label: "下级样式",
              prop: "direct",
              // name: "orgType",
              lableWidth: "140px",
              class: "sjgy",
              option: [
                {
                  value: "transverse",
                  label: "横向"
                },
                {
                  value: "1",
                  label: "竖向"
                }
              ]
            }
          ],
          rules: {
            menuName: [
              { required: true, message: "请输入菜单名称", trigger: "blur" }
            ],
            menuUrl: [
              { required: true, message: "请输入菜单路径", trigger: "blur" }
            ],
            menuIcon: [
              { required: true, message: "请输入菜单图片路径", trigger: "blur" }
            ],
            direct: [
              { required: true, message: "请选择下级样式", trigger: "blur" }
            ]
          }
        };
      }
    },
    // 新增菜单确认按钮
    async submit() {
      try {
        this.$refs.xjcdForm.isValidate();
        const flag = this.$refs.xjcdForm.flag || false;
        const params = {
          ...this.$refs.xjcdForm.form,
          pid: this.menuId
        };
        if (flag) {
          const res = await menuAdd(params);
          if (res) {
            this.$refs.menuTree.getMenuTree();
            this.getSubMenuList();
            this.dialogConfig.isShow = false;
            this.$message({
              message: "添加成功!",
              type: "success"
            });
          }
        }
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.MenuConfig {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;

  // padding: 20px;
  .left_system {
    width: 10%;
    height: 100%;
  }

  .left_menuTree {
    width: 20%;
    height: 100%;
  }

  .right_content {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #eee;
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-direction: column;

    .top_menu {
      width: 100%;
      height: 8%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;

      // background-color: #1890ff;
      .menu_left {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .check_item {
          box-sizing: border-box;
          margin: 0 30px;
          cursor: pointer;
          color: #303133;
          border-bottom: 3px solid transparent;

          &:hover {
            color: #1890ff;
            font-weight: 600;
          }
        }

        .checkColor {
          color: #1890ff;
          font-weight: 600;
          box-sizing: border-box;
          padding-bottom: 3px;
          border-bottom: 3px solid #1890ff;
        }
      }
    }

    .main_content {
      flex: 1;
      width: 100%;
      display: flex;
      box-sizing: border-box;

      // justify-content: center;
      // align-items: center;
      .details_box {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 50px 80px;
      }

      .subordinate {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 5px 20px;

        .top_serch {
          width: 100%;
          height: 8%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .serch_form {
            display: flex;
            justify-content: space-between;

            :deep(.el-input__inner) {
              width: 250px;
              height: 32px;
            }

            :deep(.el-form-item) {
              margin-right: 50px;
              margin-bottom: 0;
            }
          }
        }

        .btn_box {
          width: 100%;
          height: 3%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-top: 30px;
        }

        .list_box {
          flex: 1;
          width: 100%;
          margin-top: 30px;
        }
      }
    }

    .bottom_main {
      width: 100%;
      flex: 1;

      .details_box {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        :deep(.el-input__inner) {
          width: 500px;
        }

        :deep(.el-textarea__inner) {
          width: 500px;
        }
      }

      .sub_menu {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 5px 20px;

        .top_serch {
          width: 100%;
          height: 8%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .serch_form {
            display: flex;
            justify-content: space-between;

            :deep(.el-input__inner) {
              width: 250px;
              height: 32px;
            }

            :deep(.el-form-item) {
              margin-right: 50px;
              margin-bottom: 0;
            }
          }
        }

        .btn_box {
          width: 100%;
          height: 3%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-top: 30px;
        }

        .list_box {
          flex: 1;
          width: 100%;
          margin-top: 30px;
        }
      }
    }
  }

  .dialog_form {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  :deep(.el-dialog) {
    height: 50% !important;
  }
}

// :deep(.el-form-item) {
//   justify-content: center;
// }
:deep(.el-input__inner) {
  width: 400px;
}

:deep(.el-date-editor) {
  width: 400px !important;
}

:deep(.treeList) {
  height: 100%;

  .treeSerch {
    .el-input__inner {
      width: 300px !important;
      height: 32px;
      margin-bottom: 0;
    }
  }

  .treeStructure {
    flex: 1;
  }
}

.btnPower {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  .draggable_title {
    // width: 100%;
    font-size: 20px;
    font-weight: 600;
    color: #1890ff;
    margin: 20px 0;
    // text-align: left;
  }

  .draggable_box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    .nowBox,
    .boxList {
      // display: inline-block;
      width: 90%;
      // height: 200px;
      border: 1px solid #ccc;
      padding: 10px;
      // margin-right: 10px;
      // vertical-align: top;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .nowBox {
      min-height: 15%;
    }

    .boxList {
      flex: 1;
      // margin-top: 5%;
    }

    .item {
      background-color: #3561fd;
      color: #fff;
      border-radius: 15px;
      padding: 10px 15px;
      margin: 5px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      // margin-bottom: 5px;
    }

    .items {
      background-color: #ccc;
      color: #fff;
      border-radius: 15px;
      padding: 10px 15px;
      margin: 5px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      // margin-bottom: 5px;
    }
  }
}

.selectSystem {
  width: 100%;
  height: 100%;
  border: 1px solid #eee;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .title {
    width: 100%;
    height: 8%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: #1890ff;
    // background-color: #5077ff;
    border-bottom: 1px solid #eee;
  }

  .check_box {
    padding: 20px;
  }
}
</style>
